<template>
    <div class="select-table">
        <table>
            <thead>
                <tr>
                    <td>
                        <span>课程</span>
                    </td>
                    <td>
                        <span>老师</span>
                    </td>
                    <td>
                        <span>已选人数</span>
                    </td>
                    <td>
                        <span>选择</span>
                    </td>
                </tr>
            </thead>
            <tbody>

                <select-table-item
                    v-for="(item, index) of courseData"
                    :key="index"
                    :data="item"
                    @selectCourse="selectCourse"
                >
                </select-table-item>
            </tbody>
        </table>
    </div>
</template>

<script>
    import SelectTableItem from './Item'

    export default {
        name: "SelectTable",
        components: {
            SelectTableItem
        },
        props: {
            courseData: Object
        },
        setup(props, context) {

            const selectCourse = (data) => {
                context.emit('selectCourse', data)
            }

            return {
                selectCourse
            }
        }
    }
</script>

<style lang="scss" scoped>
.select-table {

    table, th, td {


        span {
            display: block;
            padding: 20px;
        }
    }
}
</style>